<template>
	<view>
		<!-- 头部图片 -->
		<view class="title-image">
			<image src="../../static/imag/1234.png" mode=""></image>
			<!-- 优惠 -->
			<view class="discounts">
				<!-- 外卖红包 -->
				<view class="discounts-image" :class="active===1?'active':''" @click="a(1)">
					<image src="../../static/imag/icon_a1.png"></image>
					<text>外卖红包</text>
				</view>
				<!-- 出行优惠 -->
				<view class="discounts-image" :class="active===2?'active':''" @click="a(2)">
					<image src="../../static/imag/icon_a2.png"></image>
					<text>出行优惠</text>
				</view>
				<!-- 美食娱乐 -->
				<view class="discounts-image" :class="active===3?'active':''" @click="a(3)">
					<image src="../../static/imag/icon_a3.png"></image>
					<text>美食娱乐</text>
				</view>
				<!-- 酒店购物 -->
				<view class="discounts-image" :class="active===4?'active':''" @click="a(4)">
					<image src="../../static/imag/icon_a4.png"></image>
					<text>酒店购物</text>
				</view>
			</view>
		</view>

		<!-- 福利内容开始 -->
		<view style="margin-top: 150rpx;">
			<view class="welfare" v-for="(item,i) in myList" :key="i">
				<!-- 左侧优惠内容 -->
				<view class="welfare-left">
					<view class="left-image">
						<image :src="item.src"></image>
					</view>
					<view class="welfare-view">
						<view>
							{{item.name}}
						</view>
						<view class="welfare-two">
							<view style="color: #fd3a2a; font-size: 36rpx;font-weight: 700;">
								<text>{{item.picr}}</text>元
							</view>
							<view class="todayGain">
								<text>今日已领</text>
								<view style="width: 80rpx;">
									<progress percent="80" activeColor="red"  stroke-width="4" />
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 立即领取按钮 -->
				<view class="welfare-right">
					<view class="btn">
						立即领取
					</view>
				</view>
				<!-- 上部遮挡原型 -->
				<view class="circle-one"></view>
				<!-- 下部遮挡原型 -->
				<view class="circle-two"></view>
			</view>
		</view>
		<!-- 福利内容结束 -->
		
		<!-- 没有更多 -->
		<view class="more">
			没有更多了~~
		</view>
    <TarBar tabIndex=3></TarBar>
	</view>
</template>

<script>
  import TarBar from '../../components/jinjie-tabbar/jinjie-tabbar.vue'
  
	export default {
    components: {
      TarBar
    },
		data() {
			return {
				active: 1, //选择的状态
				myList: [{
					id: 0,
					src: '../../static/imag/icon_a1.png',
					name: '美团外卖红包天天领',
					picr: '56'
				}, {
					id: 0,
					src: '../../static/imag/icon_a1.png',
					name: '美团外卖红包天天领',
					picr: '56'
				}, {
					id: 0,
					src: '../../static/imag/icon_a1.png',
					name: '美团外卖红包天天领',
					picr: '56'
				}]
			};
		},
		methods: {
			a(i) {
				console.log(i)
				this.active = i;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	// 头部图片
	.title-image {
		width: 100%;
		height: 320rpx;
		position: relative;
	}

	// 优惠
	.discounts {
		background-color: #fff;
		width: 100%;
		height: 160rpx;
		padding: 20rpx 50rpx;
		display: flex;
		justify-content: space-between;
		position: absolute;
		bottom: -130rpx;
		left: 0;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;

		.discounts-image {
			display: flex;
			align-items: center;
			flex-direction: column;
			font-size: 26rpx;
			color: #888888;

			image {
				margin-bottom: 20rpx;
				width: 88rpx;
				height: 88rpx;
			}
		}
	}

	// 福利
	.welfare {
		position: relative;
		margin: 20rpx 20rpx 0;
		background-color: #fff;
		height: 120rpx;
		border-radius: 16rpx;
		display: flex;
		padding: 20rpx 0;


		.welfare-left {
			padding-left: 30rpx;
			height: 100%;
			flex: 3;
			display: flex;
			align-items: center;

			.left-image {
				width: 80rpx;
				height: 80rpx;
			}

			.welfare-view {
				height: 100%;
				font-size: 28rpx;
				margin-left: 20rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.welfare-two {
					display: flex;
					align-items: center;

					.todayGain {
						margin-left: 20rpx;
						font-size: 22rpx;
						width: 120rpx;
						height: 50rpx;
						background-color: #fee4e5;
						border-radius: 16rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;

					}

				}

			}

		}

		.welfare-right {
			border-left: 1px dotted #888888;
			flex: 1;
			height: 100%;
			font-size: 24rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;

			.btn {
				padding: 10rpx 20rpx;
				border-radius: 32rpx;
				background-color: red;
			}
		}

		.circle-one {
			position: absolute;
			top: -10%;
			left: 74%;
			width: 30rpx;
			height: 30rpx;
			background-color: #f5f5f5;
			border-radius: 50%;
		}

		.circle-two {
			position: absolute;
			bottom: -10%;
			left: 74%;
			width: 30rpx;
			height: 30rpx;
			background-color: #f5f5f5;
			border-radius: 50%;
		}
	}

	.more {
		margin-top: 20rpx;
		width: 100%;
		display: flex;
		font-size: 24rpx;
		justify-content: center;
		color: #333;


	}

	.active {
		font-weight: 700;
		color: #333;
	}
</style>
